<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <style>
        table tr {
            height: 30px;
            text-align: center;
        }
        .add-form {
            margin-top: 50px;
        }
        .form-item {
            margin: 10px 0;
        }

    </style>
</head>
<body>

<div id="app">
    <table border="1" cellspacing="0" cellpadding="8" width="1000px">
        <tr>
            <th>ID</th>
            <th>头像</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>身份证号</th>
            <th>家庭住址</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in student">
            <td>{{item.id}}</td>
            <td><img :src="item.image" width="30px"></td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <span v-if="item.sex == 1">男</span>
                <span v-if="item.sex == 2">女</span>
            </td>
            <td>{{item.idcard}}</td>
            <td>{{item.address}}</td>
            <td>
                <button @click="edit(item.id)">编辑</button>
                <button @click="del(item.id)">删除</button>
            </td>
        </tr>
    </table>

    <div class="add-form">

        <div class="form-item">
            <label for="input-image">头像：</label>
            <input type="file" id="input-image" @change="upload($event)">
        </div>
        <div class="form-item">
            <label for="input-image">预览：</label>
            <img :src="image" width="50px" />
        </div>
        <div class="form-item">
            <label for="input-name">姓名：</label>
            <input type="text" id="input-name" v-model="name">
        </div>
        <div class="form-item">
            <label for="input-age">年龄：</label>
            <input type="text" id="input-age" v-model="age">
        </div>
        <div class="form-item">
            <label>性别：</label>
            <label for="input-sex1"><input type="radio" name="sex" value="1" id="input-sex1" v-model="sex"> 男</label>
            <label for="input-sex2"><input type="radio" name="sex" value="2" id="input-sex2" v-model="sex"> 女</label>
        </div>

        <div class="form-item">
            <label for="input-idcard">身份证号：</label>
            <input type="text" id="input-idcard" v-model="idcard">
        </div>
        <div class="form-item">
            <label for="input-address">家庭住址：</label>
            <input type="text" id="input-address" v-model="address">
        </div>
        <input type="hidden" v-model="sid">
        <div class="form-item">
            <button type="button" @click="add" v-if="formType == 'add' ">添加</button>
            <button type="button" @click="editPost" v-if="formType == 'edit' ">保存</button>
        </div>

    </div>

</div>

<script src="js/vue.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script>

    var v = new Vue({

        el: '#app',
        data: {
            student: [],
            formType: 'add',
            sid: '',
            name: '',
            age: '',
            sex: '',
            idcard: '',
            address: '',
            image:'',
        },
        methods: {
            upload: function (event) {
                var formdata = new FormData();
                formdata.append('image',event.target.files[0]);
                $.ajax({
                    url:'upload.php',
                    type:'Post',
                    processData: false,
                    contentType: false,
                    data:formdata,
                    success:function (res) {
                        res = JSON.parse(res);
                        v.image = res.data.path;

                    }
                });
            }
            ,
            editPost: function () {
                $.ajax({
                    url: 'edit-post.php',
                    type: 'POST',
                    data: {

                        id: v.sid,
                        name: v.name,
                        image:v.image,
                        age: v.age,
                        sex: v.sex,
                        idcard: v.idcard,
                        address: v.address
                    },
                    success: function (res) {
                        // 将 JSON 字符串转为 JSON 对象
                        res = JSON.parse(res);
                        alert(res.msg);
                        location.reload();
                    }
                });
            },
            edit: function (id) {

                v.formType = 'edit';

                $.ajax({
                    url: 'edit.php',
                    data: {
                        id: id
                    },
                    success: function (res) {
                        // 将 JSON 字符串转为 JSON 对象
                        res = JSON.parse(res);
                        // console.log(res.data.name);
                        v.image = res.data.image,
                        v.sid = res.data.id;
                        v.name = res.data.name;
                        v.age = res.data.age;
                        v.sex = res.data.sex;
                        v.idcard = res.data.idcard;
                        v.address = res.data.address;
                    }
                });
            },
            // 删除
            del: function (id) {
                if (confirm('确定删除吗？')) {
                    $.ajax({
                        url: 'delete.php',
                        data: {
                            id: id
                        },
                        success: function (res) {
                            // 将 JSON 字符串转为 JSON 对象
                            res = JSON.parse(res);
                            // alert(res.msg);
                            location.reload();
                        }
                    });
                }
            },
            // 添加
            add: function () {
                $.ajax({
                    url: 'add.php',
                    type: 'POST',
                    data: {
                        image:v.image,
                        name: v.name,
                        age: v.age,
                        sex: v.sex,
                        idcard: v.idcard,
                        address: v.address
                    },
                    success: function (res) {
                        // 将 JSON 字符串转为 JSON 对象
                        res = JSON.parse(res);
                        alert(res.msg);
                        location.reload();
                    }
                });
            }
        },
        // 页面创建完成自动触发 created
        created () {
            // 请求 php 读数据
            $.ajax({
                url: 'student.php',
                success: function (res) {
                    // 将 JSON 字符串转为 JSON 对象
                    res = JSON.parse(res);
                    // 赋值到 student 变量中
                    v.student = res.data;
                    // console.log(res)
                }
            });
        }
    });

</script>
</body>
</html>